<!--
 * @Description: 
 * @Version: 0.0
 * @Author: taosong
 * @Date: 2023-04-02 10:19:19
 * @LastEditors: taosong
 * @LastEditTime: 2023-04-02 13:22:32
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>改变点的颜色</title>
    <script src="../libs/index.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      canvas {
        margin: 50px auto 0;
        display: block;
        background-color: #fff;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas
      width="400"
      height="400"
      id="canvas"
    >
      此浏览器不支持canvas
    </canvas>

    <script>
      /** @type {HTMLCanvasElement} */
      const ctx = document.getElementById('canvas')
      const gl = ctx.getContext('webgl')

      const VERTEX_SHADER_SOURCE = `
        // 定义变量 只传递顶点数据 只能在顶点着色器使用
        attribute vec4 aPosition;
        // 必须要存在的main函数
        void main() {
          // 点的位置
          gl_Position = aPosition;
          // 点的大小
          gl_PointSize = 5.0;
        }
      `
      // 片元着色器
      const FRAGMENT_SHADER_SOURCE = `
      // 指定精度
      precision mediump float;
      uniform vec3 uColor;
        void main() {
          // 点的颜色
          gl_FragColor = vec4(uColor.r, uColor.g, uColor.b, 1.0);
        }
      `
      const program = initShader(
        gl,
        VERTEX_SHADER_SOURCE,
        FRAGMENT_SHADER_SOURCE
      )

      const aPosition = gl.getAttribLocation(program, 'aPosition')
      const uColor = gl.getUniformLocation(program, 'uColor')
      let points = []
      ctx.onclick = function (e) {
        const x = e.clientX
        const y = e.clientY
        const domPosition = e.target.getBoundingClientRect()
        const { top, left } = domPosition
        const domY = y - top
        const domX = x - left
        // 此时得到的domX 和 domY 需要进行等比例的减小
        // 画布宽是400 高是400 中心点事（0,0）（0, 200, 400）需要按照（-1， 0， 1）
        // 因此需要 - 200  /200的操作
        // 此处的200是canvas的half
        const halfWidth = ctx.offsetWidth / 2
        const halfHeight = ctx.offsetHeight / 2
        const clickX = (domX - halfWidth) / halfWidth
        const clickY = (halfHeight - domY) / halfHeight
        const { r, g, b } = getColor()
        points.push({
          clickX,
          clickY,
          color: {
            r,
            g,
            b
          }
        })
        for (let value of points) {
          gl.vertexAttrib2f(aPosition, value.clickX, value.clickY)
          gl.uniform3f(uColor, value.color.r, value.color.g, value.color.b)
          gl.drawArrays(gl.POINTS, 0, 1)
        }
      }

      function getColor() {
        const r = Number(Math.random().toFixed(1))
        const g = Number(Math.random().toFixed(1))
        const b = Number(Math.random().toFixed(1))
        return { r, g, b }
      }
    </script>
  </body>
</html>
